import { StyleSheet } from 'react-native';
import { phonePx } from '../../../../util/adapt';
import { APP_BLACK, APP_ORANGE_BUTTON } from '../../../../constant/color';
import { getScreenInfo } from '../../../../util/screen';
import statusBarManager from '../../../../util/native/statusBarManager';

const { height } = getScreenInfo({});

export const bottomHeight = height - phonePx(517);
const ALERT_WIDTH = phonePx(280);

export default StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 0,
    zIndex: 10
  },
  loadHeader: {
    position: 'absolute',
    top: 0,
    right: 0,
    left: 0,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  logo: {
    marginTop: phonePx(23),
    marginLeft: phonePx(26),
    width: phonePx(92),
    height: phonePx(20)
  },
  slogan: {
    width: phonePx(72),
    height: phonePx(14),
    marginTop: phonePx(12),
    marginLeft: phonePx(4)
  },
  guest: {
    width: phonePx(76),
    height: phonePx(32),
    backgroundColor: APP_ORANGE_BUTTON,
    borderRadius: phonePx(24),
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: phonePx(28),
    marginRight: phonePx(20)
  },
  guestIcon: {
    width: phonePx(27),
    height: phonePx(22)
  },
  guestDesc: {
    fontSize: phonePx(12),
    color: APP_BLACK,
    fontWeight: '500'
  },
  loadContent: {
    width: phonePx(320)
  },
  hello: {
    fontSize: phonePx(24),
    color: APP_BLACK,
    lineHeight: phonePx(36),
    fontWeight: '700',
    marginLeft: phonePx(22)
  },
  content: {
    marginTop: phonePx(26),
    width: phonePx(320),
    height: phonePx(367),
    backgroundColor: 'transparent'
  },
  loadCircle: {
    position: 'absolute',
    top: -phonePx(58),
    left: -phonePx(48),
    width: phonePx(232),
    height: phonePx(232),
    borderRadius: phonePx(166),
    backgroundColor: APP_ORANGE_BUTTON
  },
  backContent: {
    width: phonePx(26),
    height: phonePx(26),
    marginTop: phonePx(29),
    marginLeft: phonePx(14)
  },
  backIcon: {
    width: phonePx(26),
    height: phonePx(26)
  },
  agreement: {
    position: 'absolute',
    left: 0,
    top: -statusBarManager.getStatusBarHeight(),
    right: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.4)'
  },
  title: {
    alignSelf: 'center',
    width: ALERT_WIDTH - phonePx(40),
    height: phonePx(51),
    alignItems: 'center'
  },
  onlyTitle: {
    justifyContent: 'center',
    height: phonePx(94)
  },
  titleDesc: {
    color: '#585D6D',
    fontSize: phonePx(16),
    marginTop: phonePx(20),
    fontWeight: '500'
  },
  onlyTitleDesc: {
    marginTop: 0
  },
  empty: {
    height: phonePx(6)
  },
  content1: {
    alignItems: 'center'
  },
  contentDesc: {
    color: '#585D6D',
    fontSize: phonePx(12),
    lineHeight: phonePx(17)
  }
});
